<!DOCTYPE html>
<html lang="en">

<head>
    <script src="/js/jquery-1.11.3.min.js"></script>
    <script src="/js/Vue.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/frontstage.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1320167_jt20myk085d.css">
    <meta charset="UTF-8">
    <title>首页</title>
</head>

<body>
    <div id="homepage">
        <div class="topbar">
            <h1 class="theme">
                <img  class="logo" src="/imgs/logo.png">
                <!-- <a href="/" title="星云音乐" >星云音乐</a> -->
            </h1>
            <ul class="theme">
                <li class="menu">
                    <a href="/">发现音乐</a>
                </li>
                <li class="menu">
                    <a :href="'/userInfo?id='+ userData.id" v-if="userData != null">我的音乐</a>
                    <a v-else @click="loginshow = true">我的音乐</a>
                </li>
            </ul>
            
            <div class="login fr" >
                <el-dropdown v-if="userData == null">
                    <img class="user-avatar" src="/imgs/头像.png">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><a class="user-link" @click="loginshow=true">登录</a></el-dropdown-item>
                        <el-dropdown-item><a class="user-link" @click="registershow=true">注册</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown v-else>
                    <img class="user-avatar" :src="userData.picture.resourcePath">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><a class="user-link" :href="'/userInfo?id='+ userData.id">个人主页</a></el-dropdown-item>
                        <el-dropdown-item><a class="user-link" @click="exit">退出</a></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        
            <div class="search fr">	
                <div class="left_park_side"></div>
                <div class="right_park_side"></div>
                <form action="#" target="#">
                    <div class="searchbody">
                        <input type="text" name="keyword"  placeholder="张敬轩"/>
                    </div>
                    <button type="submit">
                        <i class="el-icon-search"></i>
                    </button>
                </form>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="新歌首发" name="first">
                <homemain v-if="activeName == 'first'"></homemain>
            </el-tab-pane>
            <el-tab-pane label="排行榜" name="second">
                <rank v-if="activeName == 'second'"></rank>
            </el-tab-pane>
            <el-tab-pane label="MV" name="third">
                <mv v-if="activeName == 'third'"></mv>
            </el-tab-pane>
            <el-tab-pane label="歌手" name="fourth">
                <singer v-if="activeName == 'fourth'"></singer>
            </el-tab-pane>
            <el-tab-pane label="新碟上架" name="fifth">
                <album v-if="activeName == 'fifth'"></album>
            </el-tab-pane>
        </el-tabs>

        <div class="swal-bg" v-if="loginshow">
            <div class="login-swal">
                <div class="swal-topbar">
                    <div>登录</div>
                </div>
                <el-form  class="login-form" ref="form" :model="form" label-width="60px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item class="login-btn">
                        <el-button type="primary" @click="onLogin">登录</el-button>
                        <el-button @click="loginshow=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="swal-bg" v-if="registershow">
            <div class="login-swal">
                <div class="swal-topbar">
                    <div>注册</div>
                </div>
                <el-form  class="login-form" ref="form" :model="rform" label-width="60px">
                    <el-form-item label="用户名">
                        <el-input v-model="rform.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="rform.password"></el-input>
                    </el-form-item>
                    <el-form-item class="login-btn">
                        <el-button type="primary" @click="onRegister">注册</el-button>
                        <el-button @click="registershow=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <my-footer></my-footer>
    </div>
<script type="module" th:inline="javascript">
var user = [[${user}]]
console.log(user);
var homepage = new Vue({
    el: '#homepage',
    data() {
        return {
            activeName: 'first',
            loginshow: false,
            registershow: false,
            userData: user,
            form: {
                username: '',
                password: ''
            },
            rform: {
                username: '',
                password: ''
            }
        };
    },
    methods: {
        handleClick(tab, event) {
        },
        onLogin() {
            console.log("hhh")
            $.ajax({
                url: "/login",
                type: "post",
                contentType: "application/json",
                async: false,
                data: JSON.stringify(this.form),
                success(result) {
                    console.log(result)
                    if(result){
                        window.location.href = "/";
                    }
                }
            });
        },
        onRegister() {
            console.log(this.rform)
            $.ajax({
                url: "/register",
                type: "post",
                contentType: "application/json",
                async: false,
                data: JSON.stringify(this.rform),
                success(data) {
                    console.log("hhhh");
                    if(data == '注册成功！') {
                        window.location.href = "/";
                    } else {
                        alert(data);
                    }
                }
            });
        },
        exit(){
            $.ajax({
                url: "/logout",
                type: "post",
                contentType: "application/json",
                async: false,
                success(data) {
                    window.location.href = "/";
                }
            });
        }
    },
    components: { 
        'homemain': httpVueLoader('./vue/main.vue'),
        'rank': httpVueLoader('./vue/rank.vue'), 
        'mv': httpVueLoader('./vue/mv.vue'),
        'singer': httpVueLoader('./vue/singer.vue'),
        'album': httpVueLoader('./vue/album.vue'),
        'my-footer': httpVueLoader('./vue/footer.vue')
    }
})
</script>

</body>
</html>